<template>
  <div class="tag-popover-demo">
    <nf-tag-popover
      :data="['一个很常很长很长很长很长很长的内容', '测试']"
      :popover="{ width: 400 }"
    >
      <template #item="data">
        <el-tag>
          {{ data }}
        </el-tag>
      </template>
      <template #reference="data">
        <el-tag class="cursor" :style="{ width: '24px' }"> +{{ data }} </el-tag>
      </template>
    </nf-tag-popover>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.tag-popover-demo {
  width: 200px;
  border: 1px solid var(--el-color-warning);
  margin-bottom: 24px;

  :deep(.nf-tag-popover-item) {
    display: inline-block;
  }

  .el-tag,
  :deep(.el-tag__content),
  :deep(.el-tooltip__trigger) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .el-tag {
  }
}
</style>
